<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用药管理</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .status-item {
            display: flex;
            align-items: center;
        }
        .time {
            font-weight: bold;
        }
        .doctor-info {
            margin-left: 20px;
        }
        .notification {
            position: relative;
            margin-right: 20px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-box {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .medication-container {
            display: flex;
            margin-left: 280px;
            margin-top: 20px;
            margin-right: 20px;
            height: calc(100vh - 100px);
        }
        .patient-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background: white;
            border-radius: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            margin-right: 20px;
            z-index: 1000;
        }
        .medication-content {
            flex: 1;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .medication-buttons {
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        .medication-btn {
            padding: 10px 15px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="status-bar">
        <div class="status-item">
            <div style="margin-left: 20px;">
                <span>主治医生: </span>
                <span id="attending-doctor">李医生</span>
            </div>
            <input type="text" class="search-box" placeholder="患者姓名/床号" style="margin-right: 10px;">
            <input type="text" class="search-box" placeholder="搜索床号">
        </div>
        <div class="status-item">
            <div class="time" id="current-time"></div>
            <div class="doctor-info">
                <span id="doctor-name">张医生</span>
                <span id="doctor-department"> - 内科</span>
                <span id="doctor-title"> - 主任医师</span>
            </div>
            <div class="notification">
                <span>🔔</span>
                <span class="notification-badge">3</span>
            </div>
        </div>
    </div>

    <div class="medication-container">
        <div class="patient-sidebar">
            <h3 style="margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">患者列表</h3>
            <div id="patient-list" style="margin-top: 15px; max-height: calc(100vh - 250px); overflow-y: auto;">
                <button class="medication-btn" style="margin-bottom: 15px;" onclick="showAddPatientForm()">增加患者</button>
                <div id="add-patient-form" style="display: none; padding: 15px; margin-bottom: 15px; background: #f5f5f5; border-radius: 4px;">
                    <div style="margin-bottom: 10px;">
                        <label>患者姓名:</label>
                        <input type="text" id="new-patient-name" style="width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div style="margin-bottom: 10px;">
                        <label>床号:</label>
                        <input type="text" id="new-patient-bed" style="width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div style="margin-bottom: 10px;">
                        <label>病情:</label>
                        <input type="text" id="new-patient-condition" style="width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <button class="medication-btn" onclick="addPatient()">提交</button>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('张三', '3号床')">
                    <div style="font-weight: bold;">张三</div>
                    <div style="font-size: 12px; color: #666;">3号床 · 心血管疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('李四', '5号床')">
                    <div style="font-weight: bold;">李四</div>
                    <div style="font-size: 12px; color: #666;">5号床 · 呼吸系统疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('王五', '8号床')">
                    <div style="font-weight: bold;">王五</div>
                    <div style="font-size: 12px; color: #666;">8号床 · 常规检查</div>
                </div>
            </div>
            
            <div style="margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                <div>当前患者: <span id="patient-name" style="font-weight: bold;">未选择</span></div>
                <div>床号: <span id="patient-bed">-</span></div>
            </div>
        </div>

        <div class="medication-content">
            <div class="medication-buttons">
                <button class="medication-btn" onclick="showMedicationPlan()">用药方案</button>
                <button class="medication-btn" onclick="showMedicationRecord()">用药记录</button>
                <button class="medication-btn" onclick="showMedicationAdvice()">用药建议</button>
            </div>
            
            <div id="medication-plan-form" style="display: none; margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
                <h3 style="margin-top: 0;">用药方案</h3>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                    <div>
                        <label>药品名称</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>剂量</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>给药途径</label>
                        <select style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                            <option>口服</option>
                            <option>静脉注射</option>
                            <option>肌肉注射</option>
                            <option>皮下注射</option>
                        </select>
                    </div>
                    <div>
                        <label>频率</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>开始时间</label>
                        <input type="datetime-local" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>结束时间</label>
                        <input type="datetime-local" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <label>备注</label>
                    <textarea style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;"></textarea>
                </div>
                <div style="margin-top: 15px; display: flex; gap: 10px;">
                    <button class="medication-btn" style="background: #4CAF50;">保存</button>
                    <button class="medication-btn" style="background: #f44336;" onclick="hideMedicationPlan()">取消</button>
                </div>
            </div>
            
            <div id="medication-record-form" style="display: none; margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
                <h3 style="margin-top: 0;">用药记录</h3>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                    <div>
                        <label>药品名称</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>实际剂量</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>给药时间</label>
                        <input type="datetime-local" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div>
                        <label>执行人</label>
                        <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <label>备注</label>
                    <textarea style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;"></textarea>
                </div>
                <div style="margin-top: 15px; display: flex; gap: 10px;">
                    <button class="medication-btn" style="background: #4CAF50;">保存</button>
                    <button class="medication-btn" style="background: #f44336;" onclick="hideMedicationRecord()">取消</button>
                </div>
            </div>
            
            <div id="medication-advice-form" style="display: none; margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
                <h3 style="margin-top: 0;">用药建议</h3>
                <div style="margin-bottom: 15px;">
                    <label>建议类型</label>
                    <select style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option>剂量调整</option>
                        <option>药品更换</option>
                        <option>给药方式调整</option>
                        <option>其他</option>
                    </select>
                </div>
                <div style="margin-bottom: 15px;">
                    <label>详细建议</label>
                    <textarea style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px;"></textarea>
                </div>
                <div style="margin-bottom: 15px;">
                    <label>优先级</label>
                    <select style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option>高</option>
                        <option>中</option>
                        <option>低</option>
                    </select>
                </div>
                <div style="display: flex; gap: 10px;">
                    <button class="medication-btn" style="background: #4CAF50;">提交</button>
                    <button class="medication-btn" style="background: #f44336;" onclick="hideMedicationAdvice()">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function selectPatient(name, bed) {
            document.getElementById('patient-name').textContent = name;
            document.getElementById('patient-bed').textContent = bed;
        }

        function showMedicationPlan() {
            document.getElementById('medication-plan-form').style.display = 'block';
            document.getElementById('medication-record-form').style.display = 'none';
            document.getElementById('medication-advice-form').style.display = 'none';
        }
        
        function hideMedicationPlan() {
            document.getElementById('medication-plan-form').style.display = 'none';
        }

        function showMedicationRecord() {
            document.getElementById('medication-record-form').style.display = 'block';
            document.getElementById('medication-plan-form').style.display = 'none';
            document.getElementById('medication-advice-form').style.display = 'none';
        }
        
        function hideMedicationRecord() {
            document.getElementById('medication-record-form').style.display = 'none';
        }

        function showMedicationAdvice() {
            document.getElementById('medication-advice-form').style.display = 'block';
            document.getElementById('medication-plan-form').style.display = 'none';
            document.getElementById('medication-record-form').style.display = 'none';
        }
        
        function hideMedicationAdvice() {
            document.getElementById('medication-advice-form').style.display = 'none';
        }

        function showAddPatientForm() {
            document.getElementById('add-patient-form').style.display = 'block';
        }

        function addPatient() {
            const name = document.getElementById('new-patient-name').value;
            const bed = document.getElementById('new-patient-bed').value;
            const condition = document.getElementById('new-patient-condition').value;
            
            if (!name || !bed || !condition) {
                alert('请填写完整信息');
                return;
            }
            
            const patientList = document.getElementById('patient-list');
            const newPatient = document.createElement('div');
            newPatient.className = 'patient-item';
            newPatient.style = 'padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);';
            newPatient.setAttribute('onclick', `selectPatient('${name}', '${bed}')`);
            newPatient.innerHTML = `
                <div style="font-weight: bold;">${name}</div>
                <div style="font-size: 12px; color: #666;">${bed} · ${condition}</div>
            `;
            
            patientList.insertBefore(newPatient, patientList.children[2]);
            document.getElementById('add-patient-form').style.display = 'none';
            document.getElementById('new-patient-name').value = '';
            document.getElementById('new-patient-bed').value = '';
            document.getElementById('new-patient-condition').value = '';
        }

        // 更新时间
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = 
                `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ` +
                `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
        }
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>